{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1 , user-scalable=no">
    <title>图书类型查询</title>
    <link href="{% static 'css_js/css/bootstrap.css' %}" rel="stylesheet">
    <link href="{% static 'css_js/css/index.css' %}" rel="stylesheet">
    <link href="{% static 'css_js/css/font-awesome.css' %}" rel="stylesheet">
    <link href="{% static 'css_js/css/animate.css' %}" rel="stylesheet">
    <link href="{% static 'css_js/css/bootstrap-datetimepicker.min.css' %}" rel="stylesheet" media="screen">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
          crossorigin="anonymous">
</head>
<style>
    .mybody {
        background-color: #e2f7d7;
    }
</style>
<body style="margin-top:20px;" class="mybody">
<div class="container">
    {% include 'header.html' %}
    <div class="row">
        <div class="col-md-12 wow fadeInDown" data-wow-duration="0.5s">
            <div>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li><a href="{% url 'Index:index' %}">首页</a></li>
                    <li role="presentation" class="active"><a href="#bookTypeListPanel"
                                                              aria-controls="bookTypeListPanel" role="tab"
                                                              data-toggle="tab">图书类型列表</a></li>
                    <li role="presentation"><a href="{% url 'BookType:frontAdd' %}" style="display:none;">添加图书类型</a>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="bookTypeListPanel">
                        <div class="row">
                            <div class="col-md-12 top5">
                                <div class="table-responsive">
                                    <table class="table table-condensed table-hover">
                                        <tr class="success bold">
                                            <td>序号</td>
                                            <td>图书类别</td>
                                            <td>类别名称</td>
                                            <td>可借阅天数</td>
                                        </tr>
                                        {% for bookType in bookTypes_page %}
                                            <tr>
                                                <td>{{ startIndex|add:forloop.counter }}</td>
                                                <td>{{ bookType.bookTypeId }}</td>
                                                <td>{{ bookType.bookTypeName }}</td>
                                                <td>{{ bookType.days }}</td>
                                                <td style="display:none;">
                                                    <a href="/BookType/2/frontshow"><i
                                                            class="fa fa-info"></i>&nbsp;查看</a>&nbsp;
                                                    <a href="#" onclick="bookTypeEdit('{{ bookType.bookTypeId }}');"
                                                       style="display:inline;"><i class="fa fa-pencil fa-fw"></i>编辑</a>&nbsp;
                                                    <a href="#" onclick="bookTypeDelete('{{ bookType.bookTypeId }}');"
                                                       style="display:inline;"><i class="fa fa-trash-o fa-fw"></i>删除</a>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </table>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <nav class="pull-left">
                                    <ul class="pagination">
                                        <li><a href="#" onclick="GoToPage({{ currentPage|add:-1 }},{{ totalPage }}>);"
                                               aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>

                                        {% for page in pageList %}
                                            {% if currentPage == page %}
                                                <li class="active"><a href="#"
                                                                      onclick="GoToPage({{ page }},{{ totalPage }});">{{ page }}</a>
                                                </li>
                                            {% else %}
                                                <li><a href="#"
                                                       onclick="GoToPage({{ page }},{{ totalPage }});">{{ page }}</a>
                                                </li>
                                            {% endif %}
                                        {% endfor %}
                                        <li><a href="#"
                                               onclick="GoToPage({{ currentPage|add:1 }},{{ totalPage }});"><span
                                                aria-hidden="true">&raquo;</span></a></li>

                                    </ul>
                                </nav>
                                <div class="pull-right" style="line-height:75px;">
                                    共有{{ recordNumber }}条记录，当前第{{ currentPage }}/{{ totalPage }}> 页
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div style="display:none;">
            <div class="page-header">
                <h1>图书类型查询</h1>
            </div>
            <form name="bookTypeQueryForm" id="bookTypeQueryForm" action="{% url 'BookType:frontList' %}"
                  class="mar_t15" method="post">
                <input type=hidden name=currentPage value="{{ currentPage }}>"/>
                <button type="submit" class="btn btn-primary">查询</button>
            </form>
        </div>

    </div>
</div>
<div id="bookTypeEditDialog" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title"><i class="fa fa-edit"></i>&nbsp;图书类型信息编辑</h4>
            </div>
            <div class="modal-body" style="height:450px; overflow: scroll;">
                <form class="form-horizontal" name="bookTypeEditForm" id="bookTypeEditForm"
                      enctype="multipart/form-data" method="post" class="mar_t15">
                    <div class="form-group">
                        <label for="bookType_bookTypeId_edit" class="col-md-3 text-right">图书类别:</label>
                        <div class="col-md-9">
                            <input type="text" id="bookType_bookTypeId_edit" name="bookType.bookTypeId"
                                   class="form-control" placeholder="请输入图书类别" readOnly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="bookType_bookTypeName_edit" class="col-md-3 text-right">类别名称:</label>
                        <div class="col-md-9">
                            <input type="text" id="bookType_bookTypeName_edit" name="bookType.bookTypeName"
                                   class="form-control" placeholder="请输入类别名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="bookType_days_edit" class="col-md-3 text-right">可借阅天数:</label>
                        <div class="col-md-9">
                            <input type="text" id="bookType_days_edit" name="bookType.days" class="form-control"
                                   placeholder="请输入可借阅天数">
                        </div>
                    </div>
                </form>
                <style>#bookTypeEditForm .form-group {
                    margin-bottom: 5px;
                }  </style>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" onclick="ajaxBookTypeModify();">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
{% include 'footer.html' %}
<fronts src="{% static 'fronts/glyphicons-halflings-regular.woff' %}"></fronts>
<fronts src="{% static 'fronts/glyphicons-halflings-regular.ttf' %}"></fronts>
<fronts src="{% static 'fronts/glyphicons-halflings-regular.woff2' %}"></fronts>
<script src="{% static 'css_js/js/jquery.min.js' %}"></script>
<script src="{% static 'css_js/js/bootstrap.js' %}"></script>
<script src="{% static 'css_js/js/wow.min.js' %}"></script>
<script type="text/javascript" src="{% static 'css_js/js/bootstrap-datetimepicker.min.js' %}" charset="UTF-8"></script>
<script type="text/javascript" src="{% static 'css_js/js/bootstrap-datetimepicker.zh-CN.js' %}"
        charset="UTF-8"></script>
<script src="{% static 'tiny_mce/tiny_mce.js' %}"></script>
<script src="{% static 'css_js/js/jsdate.js' %}"></script>
<script>
    var basePath = "<%=basePath%>";

    /*跳转到查询结果的某页*/
    function GoToPage(currentPage, totalPage) {
        if (currentPage == 0) return;
        if (currentPage > totalPage) return;
        document.bookTypeQueryForm.currentPage.value = currentPage;
        document.bookTypeQueryForm.submit();
    }

    /*可以直接跳转到某页*/
    function changepage(totalPage) {
        var pageValue = document.bookTypeQueryForm.pageValue.value;
        if (pageValue > totalPage) {
            alert('你输入的页码超出了总页数!');
            return;
        }
        document.bookTypeQueryForm.currentPage.value = pageValue;
        documentbookTypeQueryForm.submit();
    }

    /*弹出修改图书类型界面并初始化数据*/
    function bookTypeEdit(bookTypeId) {
        $.ajax({
            url: basePath + "BookType/" + bookTypeId + "/update",
            type: "get",
            dataType: "json",
            success: function (bookType, response, status) {
                if (bookType) {
                    $("#bookType_bookTypeId_edit").val(bookType.bookTypeId);
                    $("#bookType_bookTypeName_edit").val(bookType.bookTypeName);
                    $("#bookType_days_edit").val(bookType.days);
                    $('#bookTypeEditDialog').modal('show');
                } else {
                    alert("获取信息失败！");
                }
            }
        });
    }

    /*删除图书类型信息*/
    function bookTypeDelete(bookTypeId) {
        if (confirm("确认删除这个记录")) {
            $.ajax({
                type: "POST",
                url: basePath + "BookType/deletes",
                data: {
                    bookTypeIds: bookTypeId,
                },
                success: function (obj) {
                    if (obj.success) {
                        alert("删除成功");
                        $("#bookTypeQueryForm").submit();
                        //location.href= basePath + "BookType/frontlist";
                    } else
                        alert(obj.message);
                },
            });
        }
    }

    /*ajax方式提交图书类型信息表单给服务器端修改*/
    function ajaxBookTypeModify() {
        $.ajax({
            url: basePath + "BookType/" + $("#bookType_bookTypeId_edit").val() + "/update",
            type: "post",
            dataType: "json",
            data: new FormData($("#bookTypeEditForm")[0]),
            success: function (obj, response, status) {
                if (obj.success) {
                    alert("信息修改成功！");
                    location.href = basePath + "BookType/frontlist";
                } else {
                    alert(obj.message);
                }
            },
            processData: false,
            contentType: false,
        });
    }

    $(function () {
        /*小屏幕导航点击关闭菜单*/
        $('.navbar-collapse a').click(function () {
            $('.navbar-collapse').collapse('hide');
        });
        new WOW().init();

    })
</script>
</body>
</html>

